
/* 
 * desc: 修改element元素主题
 * version：1.0.0
 * Author: nibing
 * 修改时间：2021年6月30日14:42:03
 */

/* 引入scss */
import "./src/style/index.scss";
const __DEFUALT__COLOR = "rgb(11 ,204 ,39)";
const constList = [{
        name: "--white",
        data: "主题白",
        value: "1"
    },
    {
        name: "--black",
        data: "主题黑",
        value: "1"
    },
]
const primaryList = [
    /* 主题 */
    {
        name: "--primary",
        data: "主题",
        value: "1"
    },
    /* hover */
    {
        name: "--primary-background-hover",
        data: "主题hover-background",
        value: "0.1"
    },
    {
        name: "--primary-color-hover",
        data: "主题hover-color",
        value: "1"
    },
    {
        name: "--primary-border-hover",
        data: "主题hover-border",
        value: "0.5"
    },
    {
        name: "--primary-shadow-hover",
        data: "主题hover-shadow",
        value: "0.9"
    },
    /* active */
    {
        name: "--primary-color-active",
        data: "主题active-color",
        value: "0.9"
    },
    {
        name: "--primary-border-active",
        data: "主题active-border",
        value: "0.9"
    },
    {
        name: "--primary-background-active",
        data: "主题active-background",
        value: "0.9"
    },
    {
        name: "--primary-shadow-active",
        data: "主题active-shadow",
        value: "0.2"
    },
    /* disabled */
    {
        name: "--primary-color-disabled",
        data: "主题disabled-shadow",
        value: "0.1"
    },
    {
        name: "--primary-border-disabled",
        data: "主题disabled-border",
        value: "0.1"
    },
    {
        name: "--primary-background-disabled",
        data: "主题disabled-background",
        value: "0.1"
    },
    {
        name: "--primary-shadow-disabled",
        data: "主题disabled-shadow",
        value: "0.2"
    },
    /* plain */
    {
        name: "--primary-background-plain",
        data: "主题plain-background",
        value: "0.1"
    },
    {
        name: "--primary-border-plain",
        data: "主题plain-border",
        value: "0.3"
    },
    /* plain disabled */
    {
        name: "--primary-color-plain-disabled",
        data: "主题plain，disabled-color",
        value: "0.4"
    },
    {
        name: "--primary-border-plain-disabled",
        data: "主题plain，disabled-border",
        value: "0.15"
    },
    {
        name: "--primary-background-plain-disabled",
        data: "主题plain，disabled-background",
        value: "0.06"
    },
    /* 主要按钮 */
    {
        name: "--primary-hover",
        data: "主要按钮hover",
        value: "0.8"
    },
    {
        name: "--primary-active",
        data: "主要按钮active",
        value: "1"
    },
    {
        name: "--primary-disabled",
        data: "主要按钮disabled",
        value: "0.35"
    },
]
class Theme {
    /* 初始化方法 */
    init($color = null) {
        /* 无值取默认并存储,有值查存储：有采用存储，无采用传入 */
        if (!$color) {
            /* console.log("null采用默认值"); */
            let color = this._getLocalTheme() || __DEFUALT__COLOR;
            this._setLocalTheme("--primary", color);
            this._hexAndRgbAndRgbaSetTheme(color)
        } else {
            let color = this._getLocalTheme() || $color.replace(/\s+/g, "");
            this._hexAndRgbAndRgbaSetTheme(color)
        }
        return true
    }
    /* 单属性修改 */
    /*  setTheme(option, $color) {
         this._setLocalTheme(option, $color)
         document.documentElement.style.setProperty(option, $color);
         return true
     }
     getTheme(option) {
         return this._getLocalTheme(option)
     } */
    /* 多属性修改 */
    setThemes(options = [], $color = []) {
        /* 检错 */
        if (options.length <= 0 || $color.length <= 0 || options.length !== $color.length) {
            throw new Error("options is null or $color is null or options.length !== $color.length")
        }
        options.map((el, i) => {
            this._setLocalTheme(el, $color[i])
            document.documentElement.style.setProperty(el, $color[i]);
        })
        return true
    }
    getThemes(options = []) {
        /* 检错 */
        if (options.length <= 0) return
        let arr = [];
        options.map((el, i) => {
            arr.push(this._getLocalTheme(el)||document.documentElement.style.getPropertyValue(el))
        })
        return arr
    }
    /* 删除方法 */
    delTheme(option = ['--primary']) {
        if (option.length > 0) {
            option.map((el) => {
                document.documentElement.style.removeProperty(el);
            })
        }
        return true
    }
    /* 暴露的修改主题方法 */
    changeTheme($color) {
        this._hexAndRgbAndRgbaSetTheme($color.replace(/\s+/g, ""))
        return true
    }
    Help() {
        /* 返回站点可设置值 */
        console.log(`如何使用?\n    main.js\n        1.注释掉原element样式文件即：import 'element-ui/lib/theme-chalk/index.css';\n        2.引入自定义组件\n
        import Theme from "@/assets/js/theme/src/js/index"; // 自定义工具文件路径\n
        const Th = new Theme(); //  创建修改主题对象\n
        Th.init("#cccccc") // 站点初始颜色（hex/rgb/rgba）\n
        3.XXX.vue
        import Theme from "@/assets/js/theme/src/js/index";\n
        const Th = new Theme(); // 创建修改主题对象\n
        Th.changeTheme("#cccccc") // 站点初始颜色（hex/rgb/rgba）\n
        4.完成站点换肤\n\n您可以设置以下值：\nVariable为建议修改，Const不建议修改(name:变量，data：描述，value:与主题的grba比值，):\n\nVariable${primaryList.map((el)=>{return '\n    '+JSON.stringify(el)})}\n\n主题默认值为rgb(11 ,204 ,39)\n\n非常抱歉我们没有提供除主题外的存储，如果您需要刷新后后保留修改，可以使用setTheme(option, $color)和getTheme(option)配合完成示例如下\n1.main.js\n    Th.setTheme("--primary-hover", Th.getTheme("--primary-hover") || "#cccccc") 取出存储值或默认主题\n2.XXX.vue\n    Th.setTheme("--primary-hover","#fff") 修改颜色\n\n\n
        非常感谢您的使用，如您在使用中遇到了bug，疑问，请您发送邮件至2602824469@qq.com并说明原因
        `);
        return true
    }
    /* hex rgb rbga 模式选择 */
    _hexAndRgbAndRgbaSetTheme($color) {
        this._setLocalTheme("--primary", $color);
        if ($color.startsWith("#")) {
            let color = this._rgbToRgba(this._hexToRgb($color));
            /* console.log("hex", color); */
            this._upTheme(color);
            return true
        }
        if ($color.startsWith("rgba")) {
            /*  console.log("rgba", $color); */
            this._upTheme($color);
            return true
        }
        if ($color.startsWith("rgb")) {
            /* console.log("rgb", $color); */
            let color = this._rgbToRgba($color);
            this._upTheme(color);
            return true
        }
    }
    /* 最终修改主题的方法 */
    _upTheme($color) {
        primaryList.map((el) => {
            let str = $color.replace($color.slice($color.lastIndexOf(","), $color.lastIndexOf(")")), `,${el.value}`) /*  替换rgba==>a（全部） */
            this._upThemeAuxiliary(el.name, $color.replace($color.slice($color.lastIndexOf(","), $color.lastIndexOf(")")) + ')', `,${el.value})`))
        })

        return true
    }
    /* 最终修改主题的方法辅助函数 */
    _upThemeAuxiliary(option, $color) {
        document.documentElement.style.setProperty(option, $color)
    }
    /* 存储颜色 */
    _setLocalTheme(option, $color) {
        /* console.log("存颜色"); */
        localStorage[option] = $color
    }
    /* 获取颜色 */
    _getLocalTheme(option = "--primary") {
        /* console.log("取颜色"); */
        return localStorage.getItem(option)
    }
    /*  rgb==>rgba */
    _rgbToRgba($color) {
        if (!$color) {
            throw new Error("color is null")
        } else {
            let color = $color.replace("rgb", "rgba").replace(")", ",1)");
            /*  console.log("_rgbToRgba:", color); */
            return color
        }
    }
    /* hex==>rgb */
    _hexToRgb(hex) {
        /* console.log(hex.length); */
        if (!hex) {
            throw new Error("color is null")
        }
        if (hex.length == "4") {
            return 'rgb(' + parseInt('0x' + hex.slice(1, 2) + hex.slice(1, 2)) + ',' + parseInt('0x' + hex.slice(2, 3) + hex.slice(2, 3)) +
                ',' + parseInt('0x' + hex.slice(3, 4) + hex.slice(3, 4)) + ')';
        }
        if (hex.length == "7") {
            return 'rgb(' + parseInt('0x' + hex.slice(1, 3)) + ',' + parseInt('0x' + hex.slice(3, 5)) +
                ',' + parseInt('0x' + hex.slice(5, 7)) + ')';
        }

    }
}

export default Theme;